<template>
    <div class="mask" :style="[centerPosition]" >
         <image src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/lodingBig.png" class="loading-img" ref="loadingImg"></image>
    </div>
</template>

<script>
 const animation = weex.requireModule('animation');
export default {
    data:()=>({
      current_rotate: 0
    }),
    methods:{
          /**
     * 获取weex屏幕真实的设置高度，需要减去导航栏高度
     * @returns {Number}
     */
      getPageHeight () {
        const { env } = weex.config;
        // const navHeight = Utils.env.isWeb() ? 0 : (Utils.env.isIPhoneX() ? 176 : 132);
        return env.deviceHeight / env.deviceWidth * 750 - 132;
      },
        //loading动画
        loading(el){
            let self=this;
            this.current_rotate+=360;
            animation.transition(el,{
                styles:{
                transform: 'rotate('+self.current_rotate+'deg)',
                transformOrigin: 'center center'
                },
                duration: 400, //ms
                timingFunction: 'ease',
                delay: 0 //ms
            });
        },
    },
    computed:{
         //根据自定义的高宽来居中定位
      centerPosition() {
        let style = {};
        style["top"] = `${this.topPosition}px`;
        style["left"] = `${(750-140)/2}px`;
        return style;
      },
      topPosition () {
        return (this.getPageHeight() - 140) / 2;
      },
    },
    mounted(){
        let that = this;
        let el=this.$refs.loadingImg;
        setInterval(function(){
             that.loading(el);
        },400)
    }
}
</script>
<style scoped>
.mask{
    width:140px;
    height:140px;
    position:fixed;
    z-index:9999;
    border-radius: 20px;
     background-color: rgba(0, 0, 0, .4); 
     align-items: center;
     justify-content: center;
}
 .loading-img{
    width:88px;
    height:88px;
}
</style>    
